<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map">
          <el-button type="primary" id='pause' size="small"></el-button>
     </div>
    </div>
</template>
<script>
import imag from '../../src/assets/timg.gif'
export default {
    data () {
        return {
         map:null,
         context:null,
         data :null,
         resetTime:false,
         geojson:null,
         animation:null
        }
    },
    mounted() {
        this.init()
    },
    methods:{
        animateLine(timestamp) {
                var speedFactor = 30; // number of frames per longitude degree
                var startTime = 0;
                var progress = 0;
                var _this=this;
                if (_this.resetTime) {
                // resume previous progress
                 startTime = performance.now() - progress;
                _this.resetTime = false;
                } else {
                progress = timestamp - startTime;
                }
                
                // restart if it finishes a loop
                if (progress > speedFactor * 360) {
                startTime = timestamp;
                this.geojson.features[0].geometry.coordinates = [];
                } else {
                var x = progress / speedFactor;
                // draw a sine wave with some math.
                var y = Math.sin(x * Math.PI / 90) * 40;
                // append new coordinates to the lineString
                this.geojson.features[0].geometry.coordinates.push([x, y]);
                // then update the map
                _this.map.getSource('line-animation').setData(this.geojson);
                }
                // Request the next frame of the animation.
                _this.animation = requestAnimationFrame(this.animateLine);
            },
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [0,0],
              zoom:0.5
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
           this.geojson = {
                "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                "geometry": {
                "type": "LineString",
                "coordinates": [
                [0, 0]
                  ]
                }
                }]
                };
                
                var speedFactor = 30; // number of frames per longitude degree
                var startTime = 0;
                var progress = 0; // progress = timestamp - startTime
                // var resetTime = false; // indicator of whether time reset is needed for the animation
                var pauseButton = document.getElementById('pause');
                this.map.on('load',() =>{
                    this.map.addLayer({
                    'id': 'line-animation',
                    'type': 'line',
                    'source': {
                    'type': 'geojson',
                    'data': this.geojson
                },
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-color': '#ed6498',
                    'line-width': 5,
                    'line-opacity': .8
                }
                });
                startTime = performance.now();
 
                this.animateLine();
                pauseButton.addEventListener('click', ()=> {
                    pauseButton.classList.toggle('pause');
                    if (pauseButton.classList.contains('pause')) {
                        cancelAnimationFrame(this.animation);
                    } else {
                    this.resetTime = true;
                    this.animateLine();
                    }
                    });

                document.addEventListener('visibilitychange', ()=> {
                    this.resetTime = true;
                    });
                this.animateLine();
          });
        }
            
    }
}
</script>
<style lang="scss" scoped>
#main-map{
    width: 100%;
    height: 100%;
}
#pause {
    z-index: 30;
    position: absolute;
    margin: 20px;
}
 
#pause::after {
    content: 'Pause';
}
 
#pause.pause::after {
    content: 'Play';
}
</style>